<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>半透明边框</title>
    <style>
        body {
            background: url(./img/stone-art.jpg);
        }

        div {
            border: 10px solid hsla(0, 0%, 100%, .5);
            /* background会延伸到border box */
            background: white;
            background-clip: padding-box;

            /* background-color会渲染到padding box */
            /* background-color: white;
            border: 10px solid hsla(0, 0%, 100%, .5); */

            /* styling */
            max-width: 20em;
            padding: 2em;
            margin: 2em auto 0;
            font: 100%/1.5 sans-serif;
        }

        .box {
            border: 10px dashed white;
            /* border: 10px solid hsla(0, 0%, 100%, .5); */
            background: red;
            /* background-color: red; */
        }
    </style>
</head>

<body>
    <div class="box">
        sdf
    </div>
    <div>
        在 CSS 2.1 中，这就是背景的工作原理。我们只能接受它并且向前看。
        谢天谢地，从背景与边框（第三版）（http://w3.org/TR/css3-background）开 始，我们可以通过 background-clip 属性来调整上述默认行为所带来的不
        便。这个属性的初始值是 border-box，意味着背景会被元素的 border box
        （边框的外沿框）裁切掉。如果不希望背景侵入边框所在的范围，我们要做
        的就是把它的值设为 padding-box，这样浏览器就会用内边距的外沿来把背
        景裁切掉。
    </div>
</body>

</html>